 <div class="row">
    <div class="col-lg-12">
        <div class="panel blank-panel">

            <div class="panel-heading">
                <div class="panel-title m-b-md">
                    <h4>LOG</h4>
                </div>
                <div class="panel-options">

                    <ul class="nav nav-tabs">
                        <li><a data-toggle="tab" href="tabs_panels.html#tab-1">第一个选项卡</a>
                        </li>
                        <li class=""><a data-toggle="tab" href="tabs_panels.html#tab-2">第二个选项卡</a>
                        </li>
                         <li><a data-toggle="tab" href="tabs_panels.html#tab-1">第3个选项卡</a>
                        </li>
                         <li><a data-toggle="tab" href="tabs_panels.html#tab-1">第4个选项卡</a>
                        </li>
                    </ul>
                </div>
                <div class="test_log_operation">
				    <div class="search">
				        <input type="text" placeholder="请输入关键字" value="" id="key" class="input_search" onfocus="select()">
				        <input type="button" value="" class="input_btn" id="search">
				    </div>
				</div>
				<div class="test_log_operation">
			    	<div class="log_type_other"> 
				    	<span>
				            <label>
				                <input type="checkbox" id="my_pid" value="14899" checked="checked">
				                	只看自己程序的PID
				            </label>
				        </span>
				        <span>
				            <strong>查看：</strong>
				            <select id="type_search">
				                <option value="all">全部日志</option>
				                <option value="install">安装日志</option>
				                    <option value="run">运行日志</option>
				                <option value="uninstall">卸载日志</option>
				            </select>
				        </span>
			    	</div>
			    	<!-- Android才显示筛选项 -->
			        <div class="log_type">
			            <strong>日志筛选：</strong>
			
			            <div class="btn_labels" id="all_log">
			                <a class="cur" name="logLevel" level="a" href="javascript:;">完整日志</a>
			                <a class="" name="logLevel" level="e" href="javascript:;">
			                    <i style="background-color:red; border:red solid 1px;"></i>Error
			                </a>
			                <a class="" name="logLevel" level="w" href="javascript:;"><i style="background-color:orange; border:orange solid 1px; color:orange; "></i>Warning</a>
			                <a class="" name="logLevel" level="d" href="javascript:;"><i style="background-color:blue; border:blue solid 1px;color:blue"></i>Debug</a>
			                <a class="" name="logLevel" level="i" href="javascript:;"><i style="background-color:green; border:green solid 1px;color:green;"></i>Info</a>
			            </div>
			        </div>
				</div>
				
            </div>

            <div class="panel-body">
                 <div class="jqGrid_wrapper">
                      <table id="table_list_1"></table>
                  </div>
            </div>

        </div>
    </div>
</div>
<script type="text/javascript">
$(function(){
	// Examle data for jqGrid
    var mydata = [
        {
            id: "1",
            invdate: "2010-05-24",
            name: "test",
            note: "note",
            tax: "10.00",
            total: "2111.00"
        },
        {
            id: "2",
            invdate: "2010-05-25",
            name: "test2",
            note: "note2",
            tax: "20.00",
            total: "320.00"
        },
        {
            id: "3",
            invdate: "2007-09-01",
            name: "test3",
            note: "note3",
            tax: "30.00",
            total: "430.00"
        },
        {
            id: "4",
            invdate: "2007-10-04",
            name: "test",
            note: "note",
            tax: "10.00",
            total: "210.00"
        },
        {
            id: "5",
            invdate: "2007-10-05",
            name: "test2",
            note: "note2",
            tax: "20.00",
            total: "320.00"
        },
        {
            id: "6",
            invdate: "2007-09-06",
            name: "test3",
            note: "note3",
            tax: "30.00",
            total: "430.00"
        },
        {
            id: "7",
            invdate: "2007-10-04",
            name: "test",
            note: "note",
            tax: "10.00",
            total: "210.00"
        },
        {
            id: "8",
            invdate: "2007-10-03",
            name: "test2",
            note: "note2",
            amount: "300.00",
            tax: "21.00",
            total: "320.00"
        },
        {
            id: "9",
            invdate: "2007-09-01",
            name: "test3",
            note: "note3",
            amount: "400.00",
            tax: "30.00",
            total: "430.00"
        },
        {
            id: "11",
            invdate: "2007-10-01",
            name: "test",
            note: "note",
            amount: "200.00",
            tax: "10.00",
            total: "210.00"
        },
        {
            id: "12",
            invdate: "2007-10-02",
            name: "test2",
            note: "note2",
            amount: "300.00",
            tax: "20.00",
            total: "320.00"
        },
        {
            id: "13",
            invdate: "2007-09-01",
            name: "test3",
            note: "note3",
            amount: "400.00",
            tax: "30.00",
            total: "430.00"
        },
        {
            id: "14",
            invdate: "2007-10-04",
            name: "test",
            note: "note",
            amount: "200.00",
            tax: "10.00",
            total: "210.00"
        },
        {
            id: "15",
            invdate: "2007-10-05",
            name: "test2",
            note: "note2",
            amount: "300.00",
            tax: "20.00",
            total: "320.00"
        },
        {
            id: "16",
            invdate: "2007-09-06",
            name: "test3",
            note: "note3",
            amount: "400.00",
            tax: "30.00",
            total: "430.00"
        },
        {
            id: "17",
            invdate: "2007-10-04",
            name: "test",
            note: "note",
            amount: "200.00",
            tax: "10.00",
            total: "210.00"
        },
        {
            id: "18",
            invdate: "2007-10-03",
            name: "test2",
            note: "note2",
            amount: "300.00",
            tax: "20.00",
            total: "320.00"
        },
        {
            id: "19",
            invdate: "2007-09-01",
            name: "test3",
            note: "note3",
            amount: "400.00",
            tax: "30.00",
            total: "430.00"
        },
        {
            id: "21",
            invdate: "2007-10-01",
            name: "test",
            note: "note",
            amount: "200.00",
            tax: "10.00",
            total: "210.00"
        },
        {
            id: "22",
            invdate: "2007-10-02",
            name: "test2",
            note: "note2",
            amount: "300.00",
            tax: "20.00",
            total: "320.00"
        },
        {
            id: "23",
            invdate: "2007-09-01",
            name: "test3",
            note: "note3",
            amount: "400.00",
            tax: "30.00",
            total: "430.00"
        },
        {
            id: "24",
            invdate: "2007-10-04",
            name: "test",
            note: "note",
            amount: "200.00",
            tax: "10.00",
            total: "210.00"
        },
        {
            id: "25",
            invdate: "2007-10-05",
            name: "test2",
            note: "note2",
            amount: "300.00",
            tax: "20.00",
            total: "320.00"
        },
        {
            id: "26",
            invdate: "2007-09-06",
            name: "test3",
            note: "note3",
            amount: "400.00",
            tax: "30.00",
            total: "430.00"
        },
        {
            id: "27",
            invdate: "2007-10-04",
            name: "test",
            note: "note",
            amount: "200.00",
            tax: "10.00",
            total: "210.00"
        },
        {
            id: "28",
            invdate: "2007-10-03",
            name: "test2",
            note: "note2",
            amount: "300.00",
            tax: "20.00",
            total: "320.00"
        },
        {
            id: "29",
            invdate: "2007-09-01",
            name: "test3",
            note: "note3",
            amount: "400.00",
            tax: "30.00",
            total: "430.00"
        }
    ];

    // Configuration for jqGrid Example 1
    $("#table_list_1").jqGrid({
        data: mydata,
        datatype: "local",
        height: 250,
        autowidth: true,
        shrinkToFit: true,
        rowNum: 14,
        rowList: [10, 20, 30],
        colNames: ['序号', '日期', '客户', '金额', '运费', '总额', '备注'],
        colModel: [
            {
                name: 'id',
                index: 'id',
                width: 60,
                sorttype: "int"
            },
            {
                name: 'invdate',
                index: 'invdate',
                width: 90,
                sorttype: "date",
                formatter: "date"
            },
            {
                name: 'name',
                index: 'name',
                width: 100
            },
            {
                name: 'amount',
                index: 'amount',
                width: 80,
                align: "right",
                sorttype: "float",
                formatter: "number"
            },
            {
                name: 'tax',
                index: 'tax',
                width: 80,
                align: "right",
                sorttype: "float"
            },
            {
                name: 'total',
                index: 'total',
                width: 80,
                align: "right",
                sorttype: "float"
            },
            {
                name: 'note',
                index: 'note',
                width: 150,
                sortable: false
            }
        ],
        pager: "#pager_list_1",
        viewrecords: true,
        caption: "jqGrid 示例1",
        hidegrid: false
    });

 // Add responsive to jqGrid
    $(window).bind('resize', function () {
        var width = $('.jqGrid_wrapper').width();
        $('#table_list_1').setGridWidth(width);
    });
})();
</script>